<template>
  <div style="padding:20px;width:100%">
    <div class="clearfix">
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">注册时间</div>
        <el-date-picker
          class="c-box-flex"
          v-model="createTime"
          value-format="yyyy-MM-dd dd:hh:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          type="datetimerange"
        ></el-date-picker>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">手机号码</div>
        <el-input class="c-box-flex" placeholder="请输入手机号码" v-model="phone" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">用户ID</div>
        <el-input class="c-box-flex" placeholder="请输入用户ID" v-model="uid" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10">
        <div class="mr10">会员类型</div>
        <el-select v-model="name" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.name" v-for="obj in vipNameList" :key="obj.name"></el-option>
        </el-select>
      </div>
    </div>
    <div class="c-flex">
      <div class="c-box-flex vh"></div>
      <div>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="mt15" ref="table">
      <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column prop="createTime" label="注册时间" width="220">
          <template slot-scope="scope">
            <div>{{$format(scope.row.createTime)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="用户ID" width="220"></el-table-column>
        <el-table-column prop="phone" label="手机号码" width="150"></el-table-column>
        <el-table-column prop="ipvName" label="会员类型" width="100"></el-table-column>
        <el-table-column prop="coin" label="账户积分" width="100"></el-table-column>
        <el-table-column prop="subAccount" label="是否开通钱包" width="120">
          <template slot-scope="scope">
            <div>{{scope.row.subAccount?'开通':'未开通'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="钱包余额（元）" width="150"></el-table-column>
        <el-table-column prop label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini">
              <router-link :to="'/userDetail/'+scope.row.uid">详情</router-link>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt20 c-flex">
        <div class="c-box-flex vh"></div>
        <el-pagination
          @size-change="setPageSize"
          @current-change="setPage"
          :current-page="currentPage"
          :page-sizes="[20, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: null,
      createTime: [],
      phone: null,
      name: null,
      vipNameList: [],

      //列表相关
      List: [],
      pageTotal: null,
      currentPage: 1,
      pageSize: 20,
      maxHeight: null
    };
  },
  mounted() {
    this.maxHeight = window.innerHeight - this.$refs.table.offsetTop - 100;
    this.getList(this.currentPage, this.pageSize);
    this.selectVipName();
  },

  methods: {
    getList(currentPage, pageSize) {
      this.$axios
        .post("/user/list", {
          uid: this.uid,
          pageNum: currentPage,
          pageSize: pageSize,
          createDateStart:
            JSON.stringify(this.createTime) != "[]" ? this.createTime[0] : null,
          createDateEnd:
            JSON.stringify(this.createTime) != "[]" ? this.createTime[1] : null,
          phone: this.phone,
          name: this.name
        })
        .then(res => {
          if ((res.data.code = 200)) {
			this.List = res.data.data.list;
			this.pageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //分页
    setPage(currentPage) {
      this.currentPage = currentPage;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //分页大小
    setPageSize(v) {
      this.currentPage = 1;
      this.pageSize = v;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },

    //获取会员类型
    selectVipName() {
      this.$axios
        .post("/vip/selectVipName")
        .then(res => {
          if ((res.data.code = 200)) {
            console.log(res.data.data);
            this.vipNameList = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="less">
</style>